<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>x-spreadsheet</title>
  <link rel="stylesheet" type="text/css" href="http://localhost:8086/jmreport/desreport_/cdn/iview/iview.css">
  <script>
    let domain = 'http://localhost:8086'
    let tokenKey = 'JmReport-Access-Token'
    baseFull = domain
    token = getToken();
    //配置后台JS
    // http://192.168.1.114:8080/jeecg-boot/jmreport/desreport_/js/core/api.js
    // https://static.jeecg.com/designreport/images/spirits_1612318429586.png
    // https://static.jeecg.com/designreport/images/tree_1612318492048.png
    let scriptStringArray = [

    ]
/*    'cdn/vue/vue.min.js',
            'cdn/iview/iview.min.js',
            'cdn/axios/axios.min.js',
            'cdn/axios/qs.min.js',
            'js/core/request.js',
            'js/core/api.js',
            'js/biz/manager.js'*/
    function getToken(){
      let token = getRequestUrl().token;
      if(token){
        window.localStorage.setItem(tokenKey,token);
      }else{
        token = window.localStorage.getItem(tokenKey) || "";
      }
      return token;
    }

    function getRequestUrl() {
      let url = location.search;
      let theRequest = new Object();
      if (url.indexOf("?") != -1) {
        let str = url.substr(1);
        strs = str.split("&");
        for(var i = 0; i < strs.length; i++) {
          theRequest[strs[i].split("=")[0]]=decodeURI(strs[i].split("=")[1]);
        }
      }
      return theRequest;
    }

    function createScript(path){
      let scriptPrev = '/jmreport/desreport_/';
      const script = document.createElement('script');
      script.src = domain + scriptPrev + path;
      document.getElementsByTagName('head')[0].appendChild(script);
    }
  </script>

  <script src="http://localhost:8086/jmreport/desreport_/cdn/vue/vue.min.js"></script>
  <script src="http://localhost:8086/jmreport/desreport_/cdn/iview/iview.min.js"></script>
  <script src="http://localhost:8086/jmreport/desreport_/cdn/axios/axios.min.js"></script>
  <script src="http://localhost:8086/jmreport/desreport_/cdn/axios/qs.min.js"></script>
  <script src="http://localhost:8086/jmreport/desreport_/js/core/request.js"></script>
  <script src="http://localhost:8086/jmreport/desreport_/js/core/api.js"></script>
  <script src="http://localhost:8086/jmreport/desreport_/js/biz/manager.js"></script>
<link href="jmsheet.css" rel="stylesheet"></head>
<body onload="loadScript()" style="overflow: hidden;">
<!--<div style="width: 20%;float: left">123</div>style=""-->
<div id="app">
  <div id="jm-sheet-wrapper">
  </div>
</div>
<script>
  var reportMode='prod'
  // 1353536384966725632
  //
  // 1357221549014388736
  var excel_config_id='1338370016550195200';
  //1330791942770003968
  let xs = null;
  function loadScript() {
    scriptStringArray.forEach(p=>{
      createScript(p)
    });
    setTimeout(()=>{
      load();
    },1000)
  }
  function load() {
    const options = {
      "uploadUrl":"/jmreport/upload", //统一上传地址
      "uploadExcelUrl":"/jmreport/importExcel",//上传excel方法
      "viewLocalImage":"/jmreport/img",//预览本地图片方法,//预览本地图片方法
      pageSize:[10,20,30], //分页条数
      domain: domain,
      showToolbar: true,     //头部操作按钮
      showGrid: true,        //excel表格
      showContextmenu: true, //右键操作按钮
      loopBlockLineColor: 'red',
      loopBlockLineDash: true,
      printPaper: [{
        title: 'A5',
        size:{
          0: 223, 1: 443
        }
      }],
      "background":{
        path: "/excel_online/发票信息_1606226637613.jpg",
        repeat: "no-repeat"
      },
      view: {
        height: () => document.documentElement.clientHeight,
        width: () => document.documentElement.clientWidth,
      },
      row: {
        len: 100,
        height: 25,
        minRowResizerHeight:1 //拖拽行最小高度
      },
      col: {
        len: 30,
        width: 100,
        minWidth: 60,
        height: 0,
        minColResizerHeight:1//拖拽列最小高度
      },
      style: {
        bgcolor: '#ffffff',
        align: 'left',
        valign: 'middle',
        textwrap: false,
        strike: false,
        underline: false,
        color: '#0a0a0a',
        font: {
          name: 'Helvetica',
          size: 10,
          bold: false,
          italic: false,
        },
      },
    };

    function testSelectChartThenUpdate(data){
      let id = data.id;
      let json = JSON.parse(data.jsonString)
      json.background = 'red'
      xs.updateChart(id, json);
    }

    //  x.spreadsheet.locale('zh-cn');
    xs = x.spreadsheet('#jm-sheet-wrapper', options)
            .onSave(function (data) {
              //设置报表打印宽度
              console.log('data保存111', getTimer())
   /*           const dataRect = xs.data.getDataRect();
              let dataRectWidth = 0;
              if(dataRect){
                dataRectWidth = dataRect.w;
              }
              const printElWidth = xs.data.settings.printElWidth;
              data['dataRectWidth'] = dataRectWidth;
              data['excel_config_id'] = excel_config_id;
              data['printElWidth'] = Number(printElWidth) || dataRectWidth;
              console.log("data", data);*/
            })
            .onAddChart(function(a){
              console.log('11',a);
              var option = {
                title: {
                  text: 'ECharts 入门示例'
                },
                tooltip: {},
                legend: {
                  data: ['销量']
                },
                xAxis: {
                  data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                },
                yAxis: {},
                series: [{
                  name: '销量',
                  type: 'bar',
                  data: [5, 20, 36, 10, 10, 20]
                }]
              }

              xs.addChart(option)
            })
            .onCellExpress(function (a) {
              console.log('选中单元格的文本为', a)
              setTimeout(()=>{
                xs.setSelectCellExpress("aaa")
              }, 3000)
            })
            .onClickChart((param)=>{
              console.log('onClickChart.....', param)
            })
            .onSettingEvent(function (e, param) {
              console.log('onSettingEvent-e',e)
              console.log('onSettingEvent-param',param)
            })
            .onSelectChart(function (param) {
              console.log('onSelectChart-param', param)
              console.log(1122,xs.getAllChartInfo())
          /*    setTimeout(()=>{
                //xs.updateChart(param.id, JSON.parse(param.jsonString))
                xs.refreshChartData(param.id, [20, 10, 36, 20, 20, 50])
              },4000)*/

              let json = {
                colorDark: "#000000",
                colorLight: "#ffffff",
                height: 25,
                text: "111",
                width: 25,
              }
              //xs.updateChart(param.id, json)

              let bg = {
                color: "#fff",
                enabled: true,
                image: "/excel_online/bg1_1608012808605_1621942439115.png",
                repeat: "repeat",
              }
            //  xs.updateChartBackground(param.id, bg)

            })
            .onUploadExcel(function (res) {
              if(!res.success) return;
              const xsData ={...xs.getData()};
              xsData.styles = res.result.style;
              xsData.rows = res.result.rows;
              xs.loadData(xsData);
            });

    $jm.excelGet(excel_config_id,(res)=> {
      //加入预览地址
      xs.data.settings.viewUrl = window.location.origin+"/view.html?excel_config_id=" +excel_config_id+"&develop=true&origin="  +domain.replace("/jeecg-boot","")
      var str = res.jsonStr;
      if(!str) return;
      //页面加载时设置报表宽度
      const jsonStr = JSON.parse(str);
      console.log('jsonstr', jsonStr)
      if(jsonStr.chartList)
      {
        jsonStr.chartList.forEach(function(item){
          let config = JSON.parse(item.config);
          if (config.geo){
            if (loadMap){
              loadMap && loadMap(item)
            }
          }
        })
      }
      xs.data.settings.printElWidth = jsonStr.printElWidth || 0;
      xs.data.printElHeight = jsonStr.printElHeight ||  1047; //默认a4纸大小
      xs.loadData(jsonStr);
    },(res)=>{
      alert(res.message);
    });

    setTimeout(()=>{
     // xs.updateEditor({error: true, text: '=dbsum(ada.ad'})
      console.log(1)

    },5000)
  }

  //初始化地图数据
  function loadMap(item){
    let config = JSON.parse(item.config);
    $http.post({
      contentType:'json',
      url: api.queryMapByCode,
      data:JSON.stringify({name:config.geo.map}),
      success:(result)=>{
        let data=JSON.parse(result.data);
        xs.registerMap(result.name,data);
        xs.updateChart(item.layer_id ,config);
      }
    });
  }

  function getTimer() {
    var time = new Date();
    var h = time.getHours();
    h = h < 10 ? '0' + h : h;
    var m = time.getMinutes();
    m = m < 10 ? '0' + m : m;
    var s = time.getSeconds();
    s = s < 10 ? '0' + s : s;
    return h + ':' + m + ':' + s;
  }

  setTimeout(()=>{
    xs.getSaveData().then(data=>{
      console.log(1111, data)
    })
  }, 5000)

</script>

<!--  1363305943533752320 打印表格加图表
 1363413080033333248  二维码测试
 -->
<script type="text/javascript" src="jmsheet.js"></script></body>
</html>
